import React, { Component } from 'react';
import './PageNews.css';


import DireactPagination from './DiReactPagination.js';


class PageNews extends Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			pagename:"单个分页演示",
		
		
		
			list: [],                //存放返回当前页的数据
			
			current:1,               //存放返回当前第几页
			count:2,                          //当前页前后页数    (默认：2)
			pageCount:"",            //存放返回总页数
			showPageNum:1,					//是否显示页码     （默认值：1-显示 其他-不显示）
			showPageCount:1,               //是否显示总页数 （默认值：1-显示 其他-不显示）
			totalData:"",            //存放返回数据总条数
			showTotalData:1,               //是否显示数据总条数（默认值：1-显示 其他-不显示）
			nextPage:false,                   //是否有下一页
			coping:1,                       //是否开启首页尾页（默认值：1-显示 其他-不显示）
			showSkipPage:1               //是否显示跳页功能（默认值：1-显示 其他-不显示）
		};
	}


  	runAjax(current){
			
			var list=[];
			var pageCount="";
			var nextPage="";
			var totalData="";
			//模拟ajax数据 1-7页
			setTimeout(function(){		
				if(current==1){
					list=[
						{id:1,text:"我是显示内容111111"},
						{id:2,text:"我是显示内容222222"},
						{id:3,text:"我是显示内容3333333333"},
						{id:4,text:"我是显示内容44444444444"},
						{id:5,text:"我是显示内容555555555"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;
				}else if(current==2){
					list=[
						{id:1,text:"我是显示内容66666666"},
						{id:2,text:"我是显示内容7777777777"},
						{id:3,text:"我是显示内容8888888888"},
						{id:4,text:"我是显示内容99999999999"},
						{id:5,text:"我是显示内容101010"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==3){
					list=[
						{id:1,text:"我是显示内容111111111111111"},
						{id:2,text:"我是显示内容121212"},
						{id:3,text:"我是显示内容131313"},
						{id:4,text:"我是显示内容141414"},
						{id:5,text:"我是显示内容15515"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==4){
					list=[
						{id:1,text:"我是显示内容161616"},
						{id:2,text:"我是显示内容171717"},
						{id:3,text:"我是显示内容181818"},
						{id:4,text:"我是显示内容191919"},
						{id:5,text:"我是显示内容202020"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==5){
					list=[
						{id:1,text:"我是显示内容2121"},
						{id:2,text:"我是显示内容22222"},
						{id:3,text:"我是显示内容232323"},
						{id:4,text:"我是显示内容242424"},
						{id:5,text:"我是显示内容252525"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==6){
					list=[
						{id:1,text:"我是显示内容2626"},
						{id:2,text:"我是显示内容2727"},
						{id:3,text:"我是显示内容2828"},
						{id:4,text:"我是显示内容2929"},
						{id:5,text:"我是显示内容3030"},
					]
					pageCount=7;
					nextPage=true;
					totalData=32;			
				}else if(current==7){
					list=[
						{id:1,text:"我是显示内容3131"},
						{id:2,text:"我是显示内容3232"}
					]
					pageCount=7;
					nextPage=false;
					totalData=32;			
				};
			
				
				this.setState({
					list:list,
					current:current,
					pageCount:pageCount,
					nextPage:nextPage,
					totalData:totalData	
				})
				  
				  
			}.bind(this),200);		
	}
	
	render() {
		return (
			<div className="page">
					<h2>所在页面位置：{this.state.pagename}</h2>
					<h3 className="abc">
						模拟ajax数据 共7页 32条  <br/>演示内容：页码数量设置显示5个
					</h3>
					<ul className="ull">
						{
							this.state.list.map(function(item,index){
								return <li key={index}>
											<span className="l">id:{item.id}</span>
											<span className="r">内容：{item.text}</span>
									   </li>
							})
						}
					</ul>
					<DireactPagination 
						current={this.state.current} 
						count={this.state.count} 
						pageCount={this.state.pageCount} 
						showPageNum={this.state.showPageNum}
						showPageCount={this.state.showPageCount}
						totalData={this.state.totalData}
						showTotalData={this.state.showTotalData}
						nextPage={this.state.nextPage}
						coping={this.state.coping}
						showSkipPage={this.state.showSkipPage}
						runAjax={this.runAjax.bind(this)}>
					</DireactPagination>

			</div>

		);
	}
	
	componentDidMount() {
	  	//模拟返回第一页数据
  		this.runAjax(1);

	}

	
}

export default PageNews;
